<!-- 应用预览弹窗 -->
<template>
    <el-dialog
        v-model="dialogVisible"
        title="预览"
        width="800px"
        top="3.8vh"
        :fullscreen="fullscreen"
        append-to-body
        destroy-on-close
    >
        <el-icon
            :title="!fullscreen ? '全屏' : '取消全屏'"
            class="fullscreen-btn"
            @click.stop="fullscreen = !fullscreen"
        >
            <icon-full-screen />
        </el-icon>
        <div class="preview-dialog-content" :style="previewBoxStyle">
            <app-preview
                :appId="currentAppId"
                :historyId="currentHistoryId"
                :pageId="currentPageId"
            />
        </div>
    </el-dialog>
</template>

<script>
import { defineComponent, ref, computed } from 'vue'
import AppPreview from '@/components/app-preview'
export default defineComponent({
    name: 'AppPreviewDialog',
    components: {
        AppPreview
    },
    setup() {
        const dialogVisible = ref(false)
        const fullscreen = ref(false)
        const currentAppId = ref('')
        const currentHistoryId = ref('')
        const currentPageId = ref('')

        const previewBoxStyle = computed(() => {
            const bodyHeight = document.body.clientHeight
            const previewBoxHeight = bodyHeight - 54 - (fullscreen.value ? 0 : 100)
            return {
                transform: `scale(${previewBoxHeight / bodyHeight})`,
                transformOrigin: fullscreen.value ? 'bottom' : ''
            }
        })

        const show = ({ appId, historyId, pageId }) => {
            currentAppId.value = appId
            currentHistoryId.value = historyId
            currentPageId.value = pageId
            dialogVisible.value = true
        }

        return {
            dialogVisible,
            fullscreen,
            currentAppId,
            currentHistoryId,
            currentPageId,

            previewBoxStyle,

            show
        }
    }
})
</script>

<style lang="less" scoped>
.fullscreen-btn {
    position: absolute;
    top: 6px;
    right: 54px;
    width: 54px;
    height: 54px;
    color: var(--edit-color-info);
    font-size: 16px;
    padding-bottom: 4px;
    box-sizing: border-box;
    cursor: pointer;
    &:hover {
        color: var(--edit-color-primary);
    }
}
.preview-dialog-content {
    height: 520px;
}
</style>